<template>
  <div class="class_message">
    <div class="header">
      <div class="class_bread">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 15px">
          <el-breadcrumb-item :to="{ path: '/nightowl' }">用户主页</el-breadcrumb-item>
          <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>会员信息管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="class_time">
        <div style="margin-top: 12px">
          <time class="time" > <i class="fa fa-clock-o"></i>{{ currentDate }}</time>
        </div>
      </div>
    </div>
    <div class="function">
      <div class="function_button">
        <el-button type="success"icon="fa fa-plus-square" @click="btnAddClick">添加</el-button>
        <el-dialog title="添加普通会员"
        :visible.sync="buttonAddFun"
        :before-close="handleClose"
        width="30%">
          <el-form :model="form">
            <el-form-item label="日期:" label-width="120px">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-group>
              <el-form-item label="账号:" label-width="120px">
                <el-input v-model="form.name" style="width: 76%"></el-input>
              </el-form-item>
            </el-form-group>
            <el-form-group>
              <el-form-item label="密码:" label-width="120px">
                <el-input v-model="form.password" style="width: 76%"></el-input>
              </el-form-item>
            </el-form-group>
            <el-form-item style="background:white;margin-top: 50px;margin-left: 60%">
              <el-button type="danger" @click="handleClose" style="width: 50%">取消</el-button>
              <el-button type="primary" @click="submitdata"style="width: 50%">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-button type="danger"icon="el-icon-delete" @click="btnDelClick">删除</el-button>
        <el-dialog title="删除普通会员"
                   :visible.sync="buttonDelFun"
                   :before-close="handleClose"
                   width="30%">
          <el-form :model="form">

            <el-form-group>
              <el-form-item label="账号:" label-width="120px">
                <el-input v-model="form.password" style="width: 76%"></el-input>
              </el-form-item>
            </el-form-group>
            <el-form-item style="background:white;margin-top: 50px;margin-left: 60%">
              <el-button type="danger" @click="handleClose" style="width: 50%">取消</el-button>
              <el-button type="primary" @click="submitdata"style="width: 50%">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-button type="primary"style="width: 34%"icon="fa fa-paste">修改</el-button>
      </div>
      <div class="function_search">

      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{background:'hsl(199 16% 85% / .5)'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="注册日期"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="账号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="alive"
          label="是否注销"
          >
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleClose(){
        this.buttonAddFun= false;
        this.buttonDelFun=false;
      },
      btnAddClick(){
        this.buttonAddFun=true;
      },
      btnDelClick(){
        this.buttonDelFun=true;
      },
      submitdata(){
          var _this=this;
          this.axios({
            url:'http://localhost:3000/employee/adduser',
            method:'get',
            params:{
              date:this.form.date,
              name:this.form.name,
              password:this.form.password,
              alive:'未注销'
            }
          }).then(function (res) {
            if (res.data.flag){
              _this.tableData=res.data.addUser;//把数据传到服务层的数据对象中
              _this.$message('添加成功');
              _this.buttonAddFun=false;
            }
            else {
              alert('添加失败')
            }
          })
      }
    },
    data() {
      return {
        tableData: [{
          date:'2016-05-02',
          name:'2756137381',
          password:'19434010225',
          alive:'未注销'
        },
          {
            date: '2016-05-02',
            name: '2756137381',
            password:'19434010225',
            alive:'未注销'
          },
          {
            date: '2016-05-04',
            name: '2756137381',
            password:'19434010225',
            alive:'未注销'
          },
          {
            date: '2016-05-01',
            name: '2756137381',
            password:'19434010225',
            alive:'未注销'
          },
          {
            date: '2016-05-03',
            name: '2756137381',
            password:'19434010225',
            alive:'未注销'
          }],
        currentDate:new Date().toDateString(),
        buttonAddFun:false,
        buttonDelFun:false,
        form:{
          name:'',
          sex:'',
          date:'',
          address:'',

        }
      }

    },
    mounted(){
      this.axios({
        url:'http://test.org/employee/list',
        method:'get'
      }).then((res)=>{
        console.log(res.data);
        this.tableData = res.data;
      })
    }
  }
</script>

<style scoped>
  .class_message{
    margin:20px 15px 20px 15px;
    /*border: 2px solid black;*/
  }
  .header{
    width: 100%;
    height: 35%;
    margin-bottom: 10px;
  }
  .class_bread{
    margin-bottom: 10px;
    float: left;
    height: 50px;
    width: 40%;

  }
  .class_time{
    margin-bottom: 20px;
    float: right;
    height: 50px;
    width: 55%;
    text-align: right;
  }
  .function{
    width: 100%;
    height: 60px;
    margin-top: 55px;
    margin-bottom: 0px;
  }
  .function_button{
    width: 40%;
    height: 75%;
    float: left;
    margin-top: 10px;
    background: #42b983;
  }
  .el-button{
    width: 33%;
    height: 100%;
    margin: 0px;
    float: left;
  }
  .el-dialog__body{
    border: 1px solid red;
  }
  .el-dialog__header{
    border: 1px solid pink;
    margin-bottom: 10px;
  }
  .div_form_dialog{
    width: 150px;
    height: 400px;
  }
  .div_form_dialog_sub{
    width: 100%;
    height: 70%;
    border: 10px solid red;
  }
  .function_search{
    width: 55%;
    height: 75%;
    float: right;
  }

</style>

